<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar @click-right="$router.push('/personal')">
            <template #left>
                <span class="iconfont iconnew"></span>
            </template>
            <template #title>
                <div class="search" @click="$router.push('/search')">
                    <van-icon color="#fff" name="search" />
                    <span>搜索商品</span>
                </div>
            </template>
            <template #right>
                <!-- <van-icon name="search" size="18" /> -->
                <van-icon color="#fff" name="manager-o" size="25" />
            </template>
        </van-nav-bar>
        <!-- 导航列表（栏目） -->
        <van-tabs v-model="curIndex" @click="btnFn" @click.native="toCategory" sticky>
            <!-- <span>+</span> -->
            <van-tab v-for="item in categoryList" :title="item.name" :key="item.id">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    :immediate-check="false"
                >
                    <!-- 
                        v-model： 绑定的变量控制加载是否完成，false表示加载完成
                        refresh：表示下拉刷新时触发的事件
                    -->
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                        <!-- 新闻(文章)列表
                         不能直接在自定义组件标签上绑定原生事件，如何解决这个问题呢 ？
                            答：可以添加native修饰符解决这个问题，
                            只要给原生事件添加上这个修饰符，那么就能实现在自定义组件标签上绑定原生事件
                         -->
                        <newsItem v-for="item in articleList" 
                        :key="item.id" :obj="item" @click.native="toPage(item.id)" ></newsItem>
                    </van-pull-refresh>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import newsItem from "@/components/newsItem.vue"
import { category } from "@/api/common.js"
import { article } from "@/api/article.js"
export default {
    components: {
        newsItem
    },
    data(){
        return {
            categoryList: [],
            curIndex: this.$route.meta.curIndex,        // 当前栏目的下标值
            articleList: [],
            isLoading: false,   // 下拉刷新是否完成控制变量
            pageIndex: 1,       // 当前页码
            pageSize: 10,       // 每页加载的数据 数量
            loading: false,     // 当前上拉加载是否完成，false表示已完成，true表示未完
            finished: false     // 全局数据加载是否完成，false表示未完成，true表示已完成
        }
    },
    created(){
        // 栏目列表数据 判断缓存中是否存在，如果存在则直接从缓存中获取数据，否则通过接口获取数据
        let list = JSON.parse(localStorage.getItem("categoryList"));
        let defaultList  = JSON.parse(localStorage.getItem("defaultCategory"));
        if(defaultList){
            this.categoryList = [ ...defaultList, ...list ]
            // 获取文章列表数据
            this.getArticle()
        }else{
            // 栏目列表
            category().then(res=>{
                // console.log(40,res);
                this.categoryList = res.data.data;
                // 获取文章列表数据
                this.getArticle()
            })
        }
    },
    methods:{
        // 跳转到频道管理页面
        toCategory(e){
            // console.log(e.target);
            // 观察点击加号和点击其他地方 得到的e.target的区别，
            // 然后根据 这个区别进行判断即可判断到是否点击了加号
            if(e.target.className.indexOf("van-tabs__wrap") != -1){
                this.$router.push("/category")
            }
        },
        btnFn(name){
            // console.log(name,title);
            // this.curIndex = name; // 可省略 因为用v-model把curIndex双向绑定在了tabs组件中
            this.$route.meta.curIndex = name;
            this.articleList = [];
            this.pageIndex = 1;
            this.finished = false;
            this.getArticle()
        },
        // 跳转到文章详情页面
        toPage(id){
            // console.log(id);
            this.$router.push({
                path: "/articleDetail",
                query: {  // 通过query将id传递给文章详情页面
                    id
                }
            })
        },
        // 获取文章列表数据
        getArticle(){
            article({
                category: this.categoryList[this.curIndex].id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res=>{
                // console.log(51,res);
                // this.articleList = res.data.data;
                // 数组合并 ... 扩展运算符
                this.articleList = [...this.articleList, ...res.data.data]
                // 数组合并方法concat，返回合并后的数组
                // 语法：数组.concant(要合并的数组)
                // this.articleList = this.articleList.concat(res.data.data)
                // 将下拉刷新的变量重置为false，表示已加载完成
                this.isLoading = false;
                // 把上拉加载的控制变量 loading变为false，表示当前数据加载已经完成
                this.loading = false;
                // 判断当前是否已经把所有数据加载完成
                // 判断方式一：当当前数据总量等于total的值的时候，表示数据已经全部加载完成了
                // if(this.articleList.length === res.data.total){
                //     this.finished = true;
                // }
                // 如何后台没有反会total总数量给我们，怎么来判断？
                // 当我们请求10条数据，后台却返回给我们少于10条数据，此刻说明已经加载完所有数据了
                if(this.pageSize > res.data.data.length){
                    this.finished = true;
                }
            })
        },
        // 下拉属性触发的函数
        onRefresh(){
            // 重置数据，为了解决数据重复导致报错问题
            this.articleList = [];
            this.pageIndex = 1;
            this.finished = false;
            this.getArticle()
        },
        // 上拉加载触发的函数
        onLoad(){
            // 当用户进行下拉刷新操作的时候（进行了上拉操作后再进行下拉操作的时候），
            // 会自动触发onLoad函数，我们可以通过下面判断阻止请求下一页的数据，
            // 当然，我们也可以不用做判断，让他请求下一页的数据，也是完全没问题的，因为数据展示是没问题的
            if(this.articleList.length==0){return}
            this.pageIndex++;
            this.getArticle();
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    background: #ff0000;
    .van-nav-bar__title{
        width: 60%;
        .search{
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-align: center;
            color: #fff;
            border-radius: 20px;
            background: rgba(255,255,255,0.5);
            span{
                margin-left: 5px;
            }
        }
    }
}
.iconnew{
    font-size: 50px;
    color: #fff;
}
/deep/.van-tabs__wrap{
    position: relative;
    padding-right: 44px;
    &::after {
        content: "+";
        font-size: 30px;
        width: 44px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
    }
}
</style>